<template>
	<scroll-view upper-threshold="10" @scrolltoupper="scrolltoupper" @scrolltolower="homeTolower" scroll-y class="wrapper" :style="{height:windowH+'px'}">
		<swiper class="swiper" :autoplay="true" :circular="true" :interval="5000" :duration="1000">
			<swiper-item @click="bindswiper(item.id)" v-for="(item,index) in homeData.arrs_banner" :key="index">
				<view class="swiper-item">
					<image :src="item.b_img" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 菜单导航 -->
		<view v-if="homeData!=''" class="box">
			<view class="navCont flex_row">
				<view @click="bindNav(item)" class="flex_col btnActive" v-for="(item,index) in homeData.arrs_sort" :key="index">
					<image :src="item.index_img" mode="aspectFill"></image>
					<text>{{item.f_name}}</text>
				</view>
			</view>
		</view>
		<!-- 约会列表 -->
		<view class="cont">
			<view hover-class="bindhover" @click="bindActivity(index,item.id)" class="lists" v-for="(item,index) in actList" :key="index">
				<view class="flex_row allMsg">
					<image class="headPic" :src="item.avatarurl" mode="aspectFill"></image>
					<view class="flex_col Msg">
						<view class="userName flex_row">
							<view class="flex_row">
								<text>{{item.nickname}}</text>
								<image v-if="item.gender==1" src="../../static/image/man.png" mode="aspectFill"></image>
								<image v-else src="../../static/image/woman.png" mode="aspectFill"></image>
							</view>
							<view class="buy">{{item.h_money_item}}</view>
						</view>
						<view v-if="homeData.free_style==1" class="rang">{{item.juli_str}}</view>
						<view class="act flex_row">
							<view class="actMsg">
								<view class="actName">{{item.h_title}}</view>
								<view class="explain">{{item.h_profile}}</view>
								<view class="time">{{item.h_time_str}}</view>
							</view>
							<image :src="item.h_face_img" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<load :loading="loading" :loadTxt="loadTxt"></load>
		</view>
	</scroll-view>
</template>

<script>
	import common from "../common/network.js";
	import load from "./load.vue";
	export default {
		name:"home",
		components:{
			load
		},
		props:{
			homeData:{
				default:'',
				type:String
			},
			loading:{
				default:false,
				type:Boolean,
			},
			loadTxt:{
				default:'正在加载...',
				type:String
			},
			actList:Array,
		},
		data(){
			return{
				windowH:0,
			}
		},
		onLoad:function(){
			var that = this;
			common.network.getHeight(function(h,w){
				that.windowH = h - w/750;
			})
		},
		methods:{
			bindswiper:function(id){
				this.$emit('bindswiper',id)
			},
			bindNav:function(item){
				this.$emit('bindNav',item)
			},
			bindActivity:function(index,id){
				this.$emit('bindActivity',index,id)
			},
			homeTolower:function(){
				this.$emit('homeTolower')
			},
			scrolltoupper:function(){
				this.$emit('scrolltoupper')
			},
			homeScroll:function(e){
				this.$emit('homeScroll',e)
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		padding-bottom: 110px;
	}
	.swiper{
		height: 450px;
		overflow: hidden;
	}
	.swiper image{
		width: 100%;
		height: 450px;
	}
	.box{
		padding: 20px;
		background: #FBFAFA;
	}
	.navCont{
		padding: 30px 34px;
		padding-bottom: 0;
		box-shadow: 0 0 30px rgba(0,0,0,0.1);
		border-radius: 15px;
		flex-wrap: wrap;
	}
	.navCont view{
		width: 25%;
		font-size: 29px;
		padding-bottom: 30px;
	}
	.navCont view image{
		width: 89px;
		height: 89px;
		margin-bottom: 12px;
	}
	.lists{
		padding: 30px;
		border-bottom: 14px solid #FBFAFA;
	}
	.allMsg{
		align-items: flex-start;
	}
	.Msg{
		align-items: flex-start;
	}
	.headPic{
		border-radius: 50%;
		width: 92px;
		height: 92px;
		margin-right: 26px;
		min-width: 92px;
	}
	.buy{
		color: #E62A1F;
		font-size: 28px;
	}
	.userName{
		justify-content: space-between;
		width: 552px;
		/* padding-top: 20px; */
	}
	.userName text{
		color: #828282;
		font-size: 32px;
	}
	.userName image{
		width: 28px;
		height: 28px;
		margin-left: 16px;
	}
	.rang{
		font-size: 28px;
		color: #999;
		margin-top: 8px;
	}
	.act{
		width: 550px;
		justify-content: space-between;
		padding-top: 20px;
	}
	.actMsg{
		width: 400px;
	}
	.actMsg view{
		padding-bottom: 12px;
	}
	.actMsg .actName{
		font-size: 32px;
		font-weight: bold;
		padding-bottom: 10px;
	}
	.explain{
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #999;
		font-size: 28px;
	}
	.time{
		font-size: 28px;
	}
	.act image{
		width: 140px;
		height: 140px;
		border-radius: 4px;
	}
</style>
